<template>
    <div class="home-container" @scroll="handleScroll">
        <div class="navigator">
            <Navigator ref="Navigator" @navClicked="handleNavClicked"></Navigator>
        </div>
        <div ref="targetPosition1"></div>
        <div class="home-video">
            <video ref="videoPlayer" autoplay muted loop @ended="onVideoEnded">
                <source :src="videoSrc" type="video/mp4">
                Your browser does not support the video tag.
            </video>
            <div class="home-title">
                <div class="title">ComReading</div>
                <div class="subtitle">圈点阅读：蓝心大模型赋能的智慧阅读应用</div>
            </div>
            <div class="home-start">
                <button class="start-btn" @click="handleLogin">Get Started</button>
            </div>
        </div>
        <div ref="targetPosition2"></div>
        <div class="home-div"></div>
        <div ref="targetPosition3"></div>
        <div class="home-div" style="background-color: black;"></div>
        <div ref="targetPosition4"></div>
        <div class="home-div"></div>
        <div ref="targetPosition5"></div>
        <div class="home-div" style="background-color: black;"></div>
        <div ref="targetPosition6"></div>
        <div class="home-footer">
            <div class="profil">
                <div class="profil-logo">
                    <span class="logo-img"></span>
                    <span class="logo-title"></span>
                </div>
                <div class="profil-beian">
                    <div class="copyright">©2023-2024 南开大学软件学院</div>
                    <div class="fillings">
                        <img :src="beianlogo" />
                        <p>
                            津公网安备 14xxxxxxxxxxxx号</p>
                    </div>
                </div>
            </div>
            <div class="service">
                <div class="service-header">专业服务</div>
                <ul class="service-list">
                    <li><a href=#>模型接入</a></li>
                    <li><a href=#>场景定制</a></li>
                    <li><a href=#>技术咨询</a></li>
                    <li><a href=#>应用开发</a></li>
                </ul>
            </div>
            <div class="company">
                <div class="company-header">联系我们</div>
                <ul class="company-list">
                    <li><a href=#>意见反馈</a></li>
                    <li><a href=#>企业介绍</a></li>
                    <li><a href=#>加入团队</a></li>
                </ul>
            </div>
            <div class="media">
                <div class="media-header">如需获取更多资讯,请关注我们各平台的账号</div>
                <ul class="media-list">
                    <li v-for="platform in platforms" :key="platform.name">
                        <img :src="platform.src" alt="platform.name">
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import Navigator from '@/components/Navigator.vue';


export default {
    components: {
        Navigator,
    },
    data() {
        return {
            videoPlayer: null, // 用于存储视频播放器的引用
            videoSrc: require('@/assets/video/home_background.mp4'),
            beianlogo: require('@/assets/img/home/beian.png'),
            platforms: [
                { name: 'qq', src: require('@/assets/img/home/qq.png') },
                { name: 'vx', src: require('@/assets/img/home/vx.png') },
                { name: 'zh', src: require('@/assets/img/home/zh.png') },
                { name: 'dy', src: require('@/assets/img/home/dy.png') },
                { name: 'bl', src: require('@/assets/img/home/bl.png') }
            ],
            itemIndex: 0,
            newScrollPosition: 0,
            lastScrollPosition: window.scrollY, // 初始化时获取当前滚动位置
            doClickEvent: false,
        };
    },
    mounted() {
        this.videoPlayer = this.$refs.videoPlayer;
        this.playVideo();
    },
    methods: {
        handleLogin() {
            this.$router.push('/login');
        },
        handleNavClicked(index) {
            this.doClickEvent = true;
            const refName = 'targetPosition' + (index + 1);
            this.$refs[refName].scrollIntoView({ behavior: 'smooth' });
            setTimeout(() => {
                // 箭头函数不会更换上下文,因此成功更新
                this.doClickEvent = false;
            }, 2000);
        },
        handleScroll(event) {
            // this.lastScrollPosition = window.scrollY;
            this.lastScrollPosition = event.target.scrollTop;
            // 向下滚动
            if (this.newScrollPosition < this.lastScrollPosition && this.lastScrollPosition > window.innerHeight && !this.doClickEvent) {
                const header = document.getElementsByClassName("navigator")[0];
                header.classList.remove("slideDown");
                header.classList.add("slideUp");
            }
            // 向上滚动
            else if (this.newScrollPosition > this.lastScrollPosition) {
                const header = document.getElementsByClassName("navigator")[0];
                header.classList.remove("slideUp");
                header.classList.add("slideDown");
            }
            this.newScrollPosition = this.lastScrollPosition;

            // 计算当前滚动位置占视口高度的比例
            const scrollRatio = this.lastScrollPosition / window.innerHeight;
            if (scrollRatio < 0.5) {
                this.itemIndex = 0;
            } else if (scrollRatio < 1.5) {
                this.itemIndex = 1;
            } else if (scrollRatio < 2.5) {
                this.itemIndex = 2;
            } else if (scrollRatio < 3.5) {
                this.itemIndex = 3;
            } else if (scrollRatio < 4.5) {
                this.itemIndex = 4;
            } else if (scrollRatio < 5.5) {
                this.itemIndex = 5;
            } else {
                this.itemIndex = 6;
            }
            this.$refs.Navigator.setCurrentItem(this.itemIndex);
        },
        playVideo() {
            if (this.videoPlayer) {
                var playPromise = this.videoPlayer.play();
                if (playPromise !== undefined) {
                    playPromise.then(_ => {
                        // Automatic playback started!
                        // Show playing UI.
                        // We can now safely pause video...
                        // this.videoPlayer.pause();
                    }).catch(error => {
                        // Auto-play was prevented
                        // Show paused UI.
                    });
                }
            }
        },
        onVideoEnded() {
            this.videoPlayer.currentTime = 0;
            this.playVideo();
        },
    },
};
</script>
<style scoped>
.home-container {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgb(66, 66, 66);
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
}

.navigator {
    position: fixed;
    top: 0;
    width: 100%;
    height: 10vh;
    z-index: 9;
}

.slideUp {
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
    transition: transform .3s ease-out;
}

.slideDown {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: transform .3s ease-out;
}


.home-video {
    height: 100vh;
    position: relative;
}

.home-video video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    max-height: 100vh;
    transform: translate(-50%, -50%);
    object-fit: cover;
}


.home-title {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 60%;
    min-height: 60%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    user-select: none;
    color: white
}

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative');
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe');

/* https://fonts.googleapis.com/css2?family=你在这个网站上找到的字体名 */
.home-title .title {
    font-family: 'Cinzel Decorative';
    font-size: 10vw;
    font-weight: bolder;
    margin-bottom: 4vh;
    text-shadow: 0 0 60px #000708;
    transition: ease .5s;

    &:hover {
        letter-spacing: 10px;
        text-shadow: 0 0 60px #fff;
        text-shadow: 0 0 1px #999,
            2px 2px 2px #888,
            4px 4px 2px #777,
            6px 6px 2px #666,
            8px 8px 2px #555,
            10px 10px 2px #333;
    }
}

.home-title .subtitle {
    font-family: 'ZCOOL KuaiLe';
    font-size: 1.5vw;
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    text-overflow: ellipsis;
    position: relative;
    display: inline-block;
    transition: ease .5s;

    &:hover {
        text-shadow: 0 0 60px #fff;
    }
}

.subtitle:before,
.subtitle:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 14vw;
    height: 0.7vh;
    background-color: currentColor;
    transform: translateY(-50%);
    background: linear-gradient(to right, transparent, #fff, transparent);
    background-size: 100% 100%;
    filter: blur(4px);
}

.subtitle:before {
    left: 0;
}

.subtitle:after {
    right: 0;
}

.home-start {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 30vw;
    min-height: 20%;
    z-index: 3;
}

@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon');

.start-btn {
    width: 100%;
    height: 100%;
    margin-top: 5vh;
    border-radius: 15vw;
    padding: 1vw;
    font-family: 'Do Hyeon';
    font-size: 3em;
    font-weight: bolder;
    cursor: pointer;
    transition: 0.5s ease;
    color: white;
    background: none;
    border-color: rgb(213, 230, 249);

    &:hover {
        transform: scale(1.1);
    }
}

.home-footer {
    z-index: 4;
    color: white;
    display: flex;
    width: 100vw;
    height: 30vh;
    bottom: 0;
    left: 0;
    background-color: rgb(66, 66, 66);
}

.profil {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-left: 3vw;
}

.profil-logo {
    width: 20vw;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 10px;
    padding-left: 2vw;
    padding-top: 4vh;
    cursor: pointer;
    z-index: 2;
}

.logo-img {
    width: 50%;
    height: 100%;
    background-image: url('@/assets/img/home/logo_img.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.logo-title {
    width: 40vw;
    height: 14vh;
    margin-left: 0.5vw;
    background-image: url('@/assets/img/home/logo_title.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.profil-beian {
    position: absolute;
    margin-left: 2vw;
    top: 15vh;
}

.profil-beian .copyright {
    color: #939393;
    margin: 1vh 0;
}

.profil-beian .fillings {
    img {
        width: 20px;
        float: left;
    }

    p {
        float: left;
        height: 20px;
        line-height: 20px;
        margin: 0px 0px 0px 5px;
        color: #939393;

    }
}

.service {
    margin: auto 0;
    height: 70%;
    width: 20vw;
    position: relative;
    overflow: hidden;
}

.service::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0.1vw;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0));
    background-size: 0.1vw 100%;
    background-repeat: no-repeat;
    margin-right: -0.5vw;
}

.service-header {
    text-align: center;
    color: #939393;
    margin-bottom: 2vh;
}

.service-list {
    text-align: center;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.service-list li a {
    text-decoration: none;
    color: #fff;
    display: block;
    padding: 5px;
    transition: color 0.5s ease;

    &:hover {
        color: #939393;
    }
}

.company {
    margin: auto 0;
    height: 70%;
    width: 20vw;
    position: relative;
    overflow: hidden;
}

.company::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0.1vw;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0));
    background-size: 0.1vw 100%;
    background-repeat: no-repeat;
    margin-right: -0.5vw;
}


.company-header {
    text-align: center;
    color: #939393;
    margin-bottom: 2vh;
}

.company-list {
    text-align: center;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.company-list li a {
    text-decoration: none;
    color: #fff;
    display: block;
    padding: 5px;
    transition: color 0.5s ease;

    &:hover {
        color: #939393;
    }
}

.media {
    margin: auto 0;
    height: 60%;
    width: 30vw;
    position: relative;
    overflow: hidden;
}

.media::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0.1vw;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0));
    background-size: 0.1vw 100%;
    background-repeat: no-repeat;
    margin-right: -0.5vw;
}

.media-header {
    text-align: left;
    color: #939393;
    margin-left: 2vw;
}

.media-list {
    text-align: center;
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    margin-left: 2vw;
    margin-top: 2vh;
}

.media-list li {
    border: 2px solid white;
    border-radius: 50%;
    margin-left: 1vw;
    cursor: pointer;
    transition: 0.5s ease;

    &:hover {
        transform: scale(1.1);
        border: 1px solid #939393;
    }

    img {
        width: 2.6vw;
        padding: 0.8vw;
    }
}

.home-div {
    height: 100vh;
    width: 80vw;
    margin: auto;
    background-color: #ffffff;
}
</style>
